iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
Modern Web

【這些年我似是非懂的 Javascript】系列 第 23

【這些年我似是非懂的 Javascript】Day 23 - 是這個不是那個的 this # Part 3.

  • 分享至 

  • xImage
  •  

今天主要分享的就是兩個部分,
一個是明確的繫結,
另一個是當有多個規則能夠套用時的優先順序。
那我們開始吧


明確的繫結 ( Explicit Binding )

所謂的明確的繫結就只是指出你想要的 this ,對 this 而言 你可以使用 call(..)apply(..) 或是 ES5 提出的 bind(..) 來明確的綁定給 this 的物件,雖然他們是對 this 來說是一樣的,但是他們的行為卻會不一樣。

call

call 第一個參數為 this 的值,用法如下

function foo(content){
    console.log(this.a);
    console.log(content);
}

var obj = {
    a:2
};

foo.call(obj,'Hellow world'); 
// 2
// 'Hellow world'

apply

與 call 使用方式比較大的差異是後面接收的參數是陣列。

function foo(content){
    console.log(this.a);
    console.log(content);

}

var obj = {
    a:2
};

foo.apply(obj,['Hellow world']); 
// 2
// 'Hellow world'

bind

主要用法差異在於說先綁定一個物件後,
再將後續的參數傳入。

這個其實在別人的 code 中我個人滿常見的
用法如下

function foo(content){
    console.log(this.a);
    console.log(content);

}

var obj = {
    a:2
};

var bar = foo.bind(obj);
console.log(bar('Hellow world'))
// 2
// 'Hellow world'

佛心函式

在 JS 有很多函式會提供給你一個 Option 的參數(通常叫做 context ),
可以讓你使用特定的 this ,不用你自己透過 call(..) 或是 apply(..) 來做明確的繫結。(貼心到爆
例如以下範例

function foo(el){
    console.log(el, this.id);
}

var obj={
    id: "nice"
};

[0,1,2].forEach(foo,obj);
// 0 nice 1 nice 2 nice

new 繫結

最後一個規則啦!
基本上這個就很簡單你是不是有看過使用 new 建構過一個新物件,那所謂的 "new 繫結" 就是 this 會指向你 new 出來的物件。
例如下面的範例

function foo(){
    this.a = a;
}

var bar = new foo(2);
console.log(bar.a) // 2

優先順序

當有多個規則能夠套用時時的優先順序是誰先誰後?

  1. new 綁定
  2. 明確綁定
  3. 隱含綁定
  4. 預設綁定

以上是今天的內容,感謝您的收看 ~

明天繼續分享感恩你的收看


參考來源:

你所不知道的 JS|範疇與 Closures,this 與物件原型 (You Don't Know JS: this & Object Prototypes))


上一篇
【這些年我似是非懂的 Javascript】Day 22 - 是這個不是那個的 this # Part 2.
下一篇
【這些年我似是非懂的 Javascript】Day 24 - 是這個不是那個的 this # Part 4.
系列文
【這些年我似是非懂的 Javascript】34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言